<template>
  <div class="repair-interface">
    <el-container class="main-container">
      <!-- Left Side: Menu -->
      <el-aside width="40%" class="left-aside">
        <div class="menu-container">
          <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="handleSelect">
            
            <el-menu-item index="repair"  @click="navigate('/community/repair')">                                
            
              <repair3></repair3>&nbsp;&nbsp;
              <template #title><span class="menu-title">报事维修</span></template>  
            </el-menu-item>
            <el-menu-item index="notice" @click="navigate('/community/notice')">
              <announcement/>&nbsp;&nbsp;
              <template #title><span class="menu-title">公告查看</span></template>
            </el-menu-item>
          
            <el-menu-item index="visitors" @click="navigate('/community/visitors')">
              <visitor></visitor>&nbsp;&nbsp;
              <template #title><span class="menu-title">访客登记</span></template>
            </el-menu-item>
            <el-menu-item index="parking"  @click="navigate('/community/parking')">                               
              <car></car>&nbsp;&nbsp;
              <template #title><span class="menu-title">车位绑定</span></template>
            </el-menu-item>
            <el-menu-item index="complaints" @click="navigate('/community/complaints')">
              <complaint></complaint>&nbsp;&nbsp;
              <template #title><span class="menu-title">投诉建议</span></template>
            </el-menu-item>
            <el-menu-item index="payment" @click="navigate('/community/payment')">
              <pay></pay>&nbsp;&nbsp;
              <template #title><span class="menu-title">物业缴费</span></template>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>

      <!-- Right Side: Tabs and Content -->
      <el-main class="main-content">
       <router-view></router-view>                                                        <!-- <component :is="components[currentComponent]"></component> -->
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive,watch } from 'vue';


import announcement from '@/components/iconBywzy/announcement.vue';
import repair3 from '@/components/iconBywzy/repair3.vue';
import visitor from '@/components/iconBywzy/visitor.vue';
import car from '@/components/iconBywzy/car.vue';
import complaint from '@/components/iconBywzy/complaint.vue';
import pay from '@/components/iconBywzy/pay.vue';
import repair from '@/components/service-wzy/repair.vue'
import parking from '@/components/service-wzy/parking.vue' 
import visitors from '@/views/socialservice-grc/index.vue'
import complaints from '@/views/function-zjm/complaints.vue'
import payment from '@/views/property-lzm'
import notice from '@/views/socialservice-wjq/notice/index.vue'
import { useRoute } from 'vue-router';
import router from '@/router';
const route =useRoute()
const currentComponent=ref('repair')
const activeMenu=ref(route.name)
const navigate=(path)=>{
  router.push(path)
}
//其他界面跳转
watch(route,(newRoute)=>{
  activeMenu.value=newRoute.name
  console.dir(newRoute)
})
//点击
const handleSelect = (index) => {
  activeMenu.value=index
  navigate(`/community/${index}`)
  console.log('Selected menu item:', index);
  console.dir(activeMenu.value)
}
const components = {
  repair,
  parking,
  visitors,
  complaints,
  notice,
  payment

  /*, property,
  notice,
  complaints *//* ,
  property */


};



</script>

<style scoped>
.repair-interface {
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f0f2f5;
}

.main-container {
  height: 100%;
  display: flex;
  overflow: hidden;
}

.left-aside {
  width: 20%;
  background-color: #ffffff;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
}

.menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  padding-left: 30%;
  box-sizing: border-box;
}

.menu-title {
  font-size: large;

  font-weight: bold;
}

.main-content {
  width: 80%;
  padding: 20px;
  overflow-y: auto;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}


</style>